<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区块链查询</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
        }

        .info {
            border: 1px solid #eee;
            flex: 1;
            font-size: 13px;
        }

        .right-box {
        }

        .block-item {
            margin-top: 20px;
        }

        #block-info {
            height: 100vh;
            overflow-y: scroll;
        }

        #miner {
            height: 50vh;
            overflow-y: scroll;
        }

        #broadcast {
            height: 50vh;
            overflow-y: scroll;
        }

        .header {
            font-size: 20px;
            font-weight: bold;
        }

        .miner-info-item {
            white-space: pre-line;

        }
    </style>
</head>
<body>
<div class="container">

    <div class="left-box">
        <button onclick="getBlockChain()">查询所有区块(新到旧)</button>
        <button onclick="startMiner()">开始挖矿</button>
        <button onclick="stopMiner()">停止挖矿</button>
        <div class="info" id="block-info">

        </div>
    </div>
    <div class="right-box info">
        <div id="miner" class="info">
            <div class="header">挖矿信息</div>
            <div class="miner-info"></div>
        </div>
        <div id="broadcast" class="info">
            <div class="header">广播信息</div>
            <div class="broadcast-info"></div>
        </div>
    </div>
</div>
</body>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>
    // 入口函数
    $(function () {
        let broadcast_time = setInterval(() => {
            $.ajax({
                url: "/broadcast/info",
                success(res) {
                    let infos = $("<div></div>")
                    // 倒序循环
                    for (let j = res.length - 1; j > -1; j--) {
                        infos.append(formatBlock(res[j]))
                    }
                    $('.broadcast-info').html(infos)
                }
            })
        }, 1000)
    })

    // 获取挖矿数据定时器
    let miner_time

    // 获取所有区块
    function getBlockChain() {
        $.ajax({
            url: "/blocks",
            success(res) {
                let out = $('<div></div>');
                for (let j = res.length - 1; j > -1; j--) {
                    out.append(formatBlock(res[j]))
                }

                $('#block-info').html(out);
            }
        })
    }

    // 开始挖矿
    function startMiner() {
        $.ajax({
            url: "/miner/start", success(res) {
                alert(res)
            }
        })

        // 开启定时器获取数据
        miner_time = setInterval(() => {
            $.ajax({
                url: "/miner/info",
                success(res) {
                    let infos = $("<div></div>");
                    // 倒序循环
                    for (let j = res.length - 1; j > -1; j--) {
                        infos.append(formatBlock(res[j]))
                    }
                    $('.miner-info').html(infos)
                }
            })
        }, 1000)
    }

    // 停止挖矿
    function stopMiner() {
        $.ajax({
            url: "/miner/stop", success(res) {
                alert(res)
            }
        })

        // 停止计时器
        clearInterval(miner_time)
    }

    // 格式化区块数据
    function formatBlock(block) {
        let info = $('<div class="block-item"></div>')
        info.append($(`<div>区块索引：${block.index}</div>`));
        info.append($(`<div>前区块hash：${block.previous_hash}</div>`));
        info.append($(`<div>data内容：${block.data}</div>`));
        info.append($(`<div>dataHash：${block.data_hash}</div>`));
        info.append($(`<div>时间戳：${block.timestamp}</div>`));
        info.append($(`<div>难度：${block.bits}</div>`));
        info.append($(`<div>nonce：${block.nonce}</div>`));
        info.append($(`<div>矿机ip：${block.miner_ip}</div>`));
        return info
    }
</script>
</html>